<template>
    <div class="container">
        <div class="home">
            <header>首页</header>
            <div class="calendar flex-box-align mb30">
                <div class="calendar-out-div">
                    <router-link to="/myCalendar">
                    <div class="flex-cont">
                        <img src="" alt="">
                        <span>我的日历</span>
                    </div>
                    </router-link>
                </div>
                <div v-if="messageList.length > 0" class="flex-box-align" style="width: 100%;">
                    今日要事：
                    <div class="message">
                        <ul class="marquee_list" :style="{ top: -num + 'px'}" :class="{marquee_top:num}">
                            <li v-for="(item, index) in messageList" :key="index" v-if="messageList && messageList.length">
                                <router-link :to="{name: item.route}">{{item.showMsg}}</router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- <div class="money-ask mb30">
                <div class="title">融资需求</div>
                <ul class="company-num-list flex-box-align mb30">
                    <li class="flex">
                        <div class="li-top">本周新增融资需求</div>
                        <div>{{info.productOrderCountWeekNew?info.productOrderCountWeekNew:0 }}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">本周新增融资需求金额</div>
                        <div>{{info.productOrderAmountWeekNew  }}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">累积融资需求</div>
                        <div>{{info.productOrderTotalCount }}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">累积融资需求金额</div>
                        <div>{{info.productOrderTotalAmount }}</div>
                    </li>
                </ul>
            </div> -->
            <div class="order mb30">
                <div class="title">今日</div>
                <ul class="company-num-list flex-box-align mb30">
                    <li class="flex">
                        <div class="li-top">今日新增申请</div>
                        <div>{{returnPrice(info.orderCountDayNew)}}</div>
                    </li>
                    <!-- <li>
                        <div>{{info.orderCountDayNew  }}</div>
                        <div>今日新增邀约</div>
                    </li> -->
                    <li class="flex">
                        <div class="li-top">今日已跟进</div>
                        <div>{{returnPrice(info.orderStatusDayNew)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">累计申请</div>
                        <div>{{returnPrice(info.orderCountTotal)}}</div>
                    </li>
                    <!-- <li>
                        <div>{{info.orderCountDayNew  }}</div>
                        <div>累计邀约</div>
                    </li> -->
                    <li class="flex">
                        <div class="li-top">累计已跟进</div>
                        <div>{{returnPrice(info.orderStatusTotal)}}</div>
                    </li>
                </ul>
            </div>
            <div class="money-product mb30">
                <div class="title">贷款产品</div>
                <ul class="company-num-list flex-box-align mb30">
                    <li class="flex">
                        <div class="li-top">本周新增贷款产品</div>
                        <div>{{returnPrice(info.productCountWeekNew)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">本周新增贷款产品金额</div>
                        <div>{{returnPrice(info.productAmountWeekNew)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">累积贷款产品</div>
                        <div>{{returnPrice(info.productTotalCount)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">累积贷款产品金额</div>
                        <div>{{returnPrice(info.productTotalAmount)}}</div>
                    </li>
                </ul>
            </div>
            <div class="money-product cop mb30">
                <div class="title">合作伙伴</div>
                <ul class="company-num-list flex-box-align mb30">
                    <li class="flex">
                        <div class="li-top">企业总数</div>
                        <div>{{returnPrice(info.companyTotalCount)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">一级企业总数</div>
                        <div>{{returnPrice(info.companyFirstTotalCount)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">本周新注册企业数</div>
                        <div>{{returnPrice(info.companyCountWeekNew)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">本周新增一级企业数</div>
                        <div>{{returnPrice(info.companyFirstCountWeekNew)}}</div>
                    </li>
                </ul>
                <ul class="company-num-list flex-box-align mb30">
                    <li class="flex">
                        <div class="li-top">资方总数</div>
                        <div>{{returnPrice(info.bankTotalCount)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">一级资方总数</div>
                        <div>{{returnPrice(info.bankFirstTotalCount)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">二级资方总数</div>
                        <div>{{returnPrice(info.bankSecondTotalCount)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">本月新增资方数</div>
                        <div>{{returnPrice(info.bankFirstCountWeekNew)}}</div>
                    </li>
                </ul>
                <ul class="company-num-list flex-box-align mb30">
                    <li class="flex">
                        <div class="li-top">推荐机构总数</div>
                        <div>{{returnPrice(info.channelTotalCount)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">一级推荐机构总数</div>
                        <div>{{returnPrice(info.channelFirstTotalCount)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">本月新增推荐机构</div>
                        <div>{{returnPrice(info.channelFirstCountMonthNew)}}</div>
                    </li>
                </ul>
            </div>
            <div class="money-product mb30">
                <div class="title">期权信息</div>
                <ul class="company-num-list flex-box-align mb30">
                    <li class="flex">
                        <div class="li-top">期权一年内到期单</div>
                        <div>{{returnPrice(info.orderBankExpiredYearCount)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">期权成功退出单</div>
                        <div>{{returnPrice(info.orderBankSuccessCount)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">含期权单</div>
                        <div>{{returnPrice(info.orderBankAllCount)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">贷后管理完结单</div>
                        <div>{{returnPrice(info.orderLoanFinishedCount)}}</div>
                    </li>
                    <li class="flex">
                        <div class="li-top">贷后管理总量</div>
                        <div>{{returnPrice(info.orderLoanCount)}}</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import {parseUrlParams} from "../util";
    let CONSTANT = require('../constant/constant.js'),
        common = require('../common.js');
    export default {
        data() {
            return {
                info:'',
                num: 0,
                messageList: []
            }
        },
        mounted(){
            this.getMessage()
            setInterval( () => {
                this.getMessage()
            }, 120000)
            this.getTotal()
        },
        methods:{
            getMessage() {
                let url = CONSTANT.URL.CALENDAR.MESSAGELIST;
                common.requestAjax(url, {}, {}, (data) => {
                    if(data.status == 200) {
                        this.messageList = data.data.bussData;
                        this.showMarquee(this.num)
                    }
                })
            },
            returnPrice(num){
                return common.returnNum(num)
            },
            getTotal(id) {
                let url = CONSTANT.URL.REPORT.FINDREPORTDATA,
                data = {};
                common.requestAjax(url, JSON.stringify(data), {}, (data) => {
                    if (data.status == 200) {
                        this.info = data.data.bussData;
                    }
                })
            },
            showMarquee:function (num) {
                if (!this.messageList[0]) return 
                this.messageList.push(this.messageList[0]);
                var max = this.messageList.length;
                var that = this;
                let marqueetimer =  setInterval(function(){
                    num++;
                    if(num>=max ){
                        num=0;
                    }
                    that.num=num*30;
                }, 2000);
            }
        }
    }
</script>

<style lang="scss">
    .message {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;/*关键样式*/
        overflow: hidden;
        /*margin-top: 20px;*/
    }
    .marquee_list{
        display: block;
        position: absolute;
        top:0;
        left: 0;
    }
    .marquee_top{transition: top 0.5s ;}/*关键样式*/
    .marquee_list li{
        height: 30px;/*关键样式*/
        line-height: 30px;/*关键样式*/
        font-size: 14px;
        padding-left: 20px;
        background-color: #fff;
        a {
            color: #333;
        }
    }
    .container {
        .mb30 {
            margin-bottom: 30px;
        }
        .home {
            header {
                margin: 19px 0;
                font-size: 14px;
                color: #999;
            }
            .calendar {
                font-size: 14px;
                height: 70px;
                line-height: 70px;
                background-color: #fff;
                .calendar-out-div {
                    /*margin-top: 15px;*/
                    margin-left: 16px;
                    div:nth-child(1) {
                        color: #fff;
                        width: 120px;
                        height: 40px;
                        line-height: 40px;
                        /*margin-left: 16px;*/
                        background-color: #ED7018;
                        border-radius: 4px;
                        box-shadow:2px 0px 1px rgba(15,5,9,0.2);
                        a {
                            color: #fff;
                        }
                    }
                }
                
                div:nth-child(2) {
                    margin-left: 150px;
                    white-space: nowrap;
                }
            }
            .money-ask, .money-product {
                &.cop{
                    ul{
                        margin-bottom: 20px;
                    }
                }
                .title {
                    position: relative;
                    font-size: 20px;
                    margin-left: 21px;
                    margin-bottom: 20px;
                    &:after {
                        content: "";
                        position: absolute;
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background-color: #ED7018;
                        top: 50%;
                        left: -21px;
                        transform: translateY(-50%);
                    }
                }
                /*
                ul {
                    &.col3{
                        li{
                            width: 32.4%;
                        }
                    }
                    li {
                        cursor: pointer;
                        width: 24%;
                         height: 152px;
                        padding-top: 48px;
                        background-color: #fff;
                        box-shadow:2px 0px 1px rgba(15,5,9,0.1);
                        margin-right: 1.3%;
                        &:last-child {
                            margin-right: 0;
                        }
                        div:nth-child(1) {
                            font-size: 60px;
                            color: #111111;
                            text-align: center;
                        }
                        div:nth-child(2) {
                            font-size: 16px;
                            color: #666;
                            text-align: center;
                        }
                    }
                }
                */
            }
            .order {
                .title {
                    position: relative;
                    font-size: 20px;
                    margin-left: 21px;
                    margin-bottom: 20px;
                    &:after {
                        content: "";
                        position: absolute;
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background-color: #ED7018;
                        top: 50%;
                        left: -21px;
                        transform: translateY(-50%);
                    }
                }
                /*
                ul {
                    &.today li{
                         width: 24%;
                    }
                    li {
                        cursor: pointer;
                        width: 15.5%;
                        height: 152px;
                        padding-top: 48px;
                        background-color: #fff;
                        box-shadow:2px 0px 1px rgba(15,5,9,0.1);
                        margin-right: 1.3%;
                        &:last-child {
                            margin-right: 0;
                        }
                        div:nth-child(1) {
                            font-size: 60px;
                            color: #111111;
                            text-align: center;
                        }
                        div:nth-child(2) {
                            font-size: 16px;
                            color: #666;
                            text-align: center;
                        }
                    }
                }
                */
            }
        }
    }
</style>
